<template>
  <div>
    <div class="center">
      <div class="row">
        <div>我的</div>
        <van-nav-bar>
          <template #right>
            <van-icon
              name="setting-o"
              size="23"
              color="#000"
              @click="$router.push('text')"
            /> </template
        ></van-nav-bar>
      </div>
      <div class="row2">
        <div class="top">
          <div class="left">
            <img src="../assets/imgs/1013204323.jpg" alt="" />
            <div class="l">
              <div class="s">
                <span>家有小沙</span>
              </div>
              <div class="x">
                <van-icon name="gem-o" color="#0099ff" size="20" />
                <span>黄金会员</span>
              </div>
            </div>
          </div>

          <div class="right" style="display: flex; align-items: center">
            <van-icon size="40" color="#fff" name="qr" />
            <van-icon size="22" color="#fff" name="arrow" />
          </div>
        </div>
        <div class="bottom">
          <div class="item">
            <p>10</p>
            <p>关注</p>
          </div>
          <div class="item">
            <p>10</p>
            <p>粉丝</p>
          </div>
          <div class="item">
            <p>10</p>
            <p>收藏</p>
          </div>
          <div class="item" @click="$router.push('fuwu')">
            <p>0</p>
            <p>卡券</p>
          </div>
        </div>
      </div>
      <div class="row3">
        <h4>我的萌宠日记</h4>
      </div>
      <div class="row4">
        <van-swipe @change="onChange">
          <van-swipe-item>
            <img src="../assets/imgs/20221013203600.jpg" alt="" />
            <span>这是关于宠物的介绍</span>
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/imgs/221013203641.jpg" alt="" />
            <span>这是关于宠物的介绍</span>
          </van-swipe-item>
          <van-swipe-item
            ><img src="../assets/imgs/221013203641.jpg" alt="" />
            <span>这是关于宠物的介绍</span></van-swipe-item
          >
          <van-swipe-item
            ><img src="../assets/imgs/221013203641.jpg" alt="" />
            <span>这是关于宠物的介绍</span></van-swipe-item
          >
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
      </div>
      <div class="row5">
        <h4>我的订单</h4>
      </div>
      <div class="row6">
        <ul>
          <li class="a" @click="$router.push('dd')">
            <van-icon name="paid" size="23" /><span>待付款</span>
          </li>
          <li class="b" @click="$router.push('dd')">
            <van-icon name="todo-list-o" size="23" /><span>待发货</span>
          </li>
          <li class="c" @click="$router.push('dd')">
            <van-icon name="logistics" size="23" /><span>待收货</span>
          </li>
          <li class="d" @click="$router.push('dd')">
            <van-icon name="records" size="23" /><span>待评价</span>
          </li>
        </ul>
      </div>
      <div class="row7">
        <h4>我的服务</h4>
      </div>
      <div class="row8">
        <ul>
          <li class="xa" @click="$router.push('Chat?sendId=3')">
            <van-icon name="chat-o" size="23" color="#fff" /><span
              >在线客服</span
            >
          </li>
          <li class="xb" @click="$router.push('num')">
            <van-icon name="phone-o" size="23" color="#fff" /><span
              >客服热线</span
            >
          </li>
          <li class="xc" @click="$router.push('fankui')">
            <van-icon name="records" size="23" color="#fff" /><span
              >意见反馈</span
            >
          </li>
          <li class="xd" @click="$router.push('service')">
            <van-icon name="shop-o" size="23" color="#fff" /><span
              >我的客服</span
            >
          </li>
        </ul>
        <ul>
          <li class="xa">
            <van-icon name="chat-o" size="23" color="#fff" /><span
              >养宠顾问</span
            >
          </li>
          <li class="xb">
            <van-icon name="phone-o" size="23" color="#fff" /><span
              >客服热线</span
            >
          </li>
          <li class="xc">
            <van-icon name="records" size="23" color="#fff" /><span
              >意见反馈</span
            >
          </li>
          <li class="xd">
            <van-icon name="shop-o" size="23" color="#fff" /><span
              >商家入驻</span
            >
          </li>
        </ul>
      </div>
      <my-footer />
    </div>
  </div>
</template>
<script>
import MyFooter from "@/components/MyFooter.vue";

export default {
  components: { MyFooter },

  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  background-image: url("../assets/img/bg.jpg");
}
ul {
  list-style: none;
}
a {
  display: flex;
  align-items: center;
  color: #000;
}
.van-swipe__track > .van-swipe-item > img {
  display: block;
  width: 300px;
  height: 200px;
}
.center {
  padding: 5px 10px 0 10px;
  width: 340px;
  margin: 0 auto;
  // margin: 8px 0;
}
.row {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  > div {
    display: flex;
    align-items: center;
  }
}
.row2 {
  > .bottom > .item {
    display: flex;
    flex-direction: column;
    > p {
      margin: 3px;
      text-align: center;
    }
  }
}
.row2 .top {
  display: flex;
  justify-content: space-between;
  padding: 20px 8px;

  > .left {
    display: flex;
    > img {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      padding: 0 5px;
    }
  }
  .x > img {
    width: 15px;
    height: 15px;
    padding-right: 2px;
  }
  > .right img {
    padding-right: 25px;
    padding-top: 10px;
  }
}
.l .s > span {
  display: block;
  padding-left: 8px;
  font-size: 25px;
  color: #fff;
  padding-bottom: 8px;
}
.l .x > span {
  padding-left: 8px;
  font-size: 20px;
  color: #fff;
}
.row2 {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding-bottom: 10px;

  > .bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    color: #fff;
  }
}
.row3 {
  display: flex;
  justify-content: space-between;
  > span {
    display: flex;
    align-items: center;
  }
}
h4 {
  font-size: 18px;
  padding: 10px 0;
}
.row4 {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 200px;
  left: 6%;
  > img {
    display: block;
    width: 100%;
    border-radius: 15px;
  }
  .van-swipe__track > .van-swipe-item > span {
    color: #fff;
    position: absolute;
    bottom: 3px;
    left: 5%;
  }
}
.row5 {
  display: flex;
  justify-content: space-between;
  > span {
    display: flex;
    align-items: center;
  }
}
.row6 > ul {
  display: flex;
  justify-content: space-between;
}
.row6 > ul > li {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  margin: 0 8px;
  align-items: center;
  color: #fff;
  border-radius: 10px;
}
.a {
  background-color: #fd7298;
}
.b {
  background-color: #ffa74a;
}
.c {
  background-color: #6cb2ff;
}
.d {
  background-color: #f07aeb;
}
.row8 {
  margin-bottom: 50px;
}
.row8 > ul {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 3px;
  > li {
    background-color: rgb(173, 231, 231);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 3px 5px;
    margin: 0 8px;
    align-items: center;
    color: #000;
    border-radius: 10px;
    > span {
      padding-top: 5px;
    }
  }
}
</style>
